Skip to content

Commit

Permalink
Merge pull request #22 from PredixDev/codeReview
Browse files Browse the repository at this point in the history
codeReview
  • Loading branch information
benoitjchevalier authored Jun 2, 2017
2 parents 28ac841 + 0c36893 commit 5aec9bb
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 9 deletions.
2 changes: 1 addition & 1 deletion css/px-tooltip-styles.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<dom-module id="px-tooltip-styles">
<template>
<style>
@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */#tooltip,div#carat.top{background-color:var(--px-tooltip-background-color,#fff)}#tooltip,a:active,a:hover{outline:0}#tooltip,div#carat{pointer-events:none}html{background-color:var(--px-base-background-color,#fff);font-size:15px;line-height:1.33333;overflow-y:scroll;min-height:100%;box-sizing:border-box}:host,html{color:var(--px-base-text-color,#2c404c);line-height:1.33333;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,figure{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}address,blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,table,ul{margin-bottom:1rem}li>ol,li>ul{margin-bottom:0}dd,ol,ul{margin-left:2rem}img{max-width:100%;border:0}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre{overflow:auto}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:link,a:visited{color:#007acc}a:hover{color:#005c99}a:active{color:#003d66}.float--right{float:right!important}.float--left{float:left!important}.float--none{float:none!important}.text--left{text-align:left!important}.text--center{text-align:center!important}.proceed,.text--right{text-align:right!important}.full-height{height:100%!important}.informative{cursor:help!important}.pointer{cursor:pointer!important}.muted{opacity:.5!important}.caps{text-transform:uppercase!important}.hidden{display:none!important;visibility:hidden}.a11y,.visuallyhidden{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}.a11y.focusable:active,.a11y.focusable:focus,.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;overflow:visible;width:auto;height:auto;margin:0;clip:auto}@media screen and (max-width:44.9375em){.a11y-palm,.visuallyhidden-palm{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:45em) and (max-width:63.9375em){.a11y-lap,.visuallyhidden-lap{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:45em){.a11y-lap-and-up,.visuallyhidden-lap-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:63.9375em){.a11y-portable,.visuallyhidden-portable{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:64em){.a11y-desk,.visuallyhidden-desk{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx){.a11y-retina,.visuallyhidden-retina{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}.invisible{visibility:hidden!important}.flex{display:flex}.inline--flex{display:inline-flex}.flex--row{flex-direction:row}.flex--row--rev{flex-direction:row-reverse}.flex--col{flex-direction:column}.flex--col--rev{flex-direction:column-reverse}.flex--nowrap{flex-wrap:nowrap}.flex--wrap{flex-wrap:wrap}.flex--wrap--rev{flex-wrap:wrap-reverse}.flex--left{justify-content:flex-start}.flex--center{justify-content:center}.flex--right{justify-content:flex-end}.flex--justify{justify-content:space-between}.flex--spaced{justify-content:space-around}.flex--top{align-items:flex-start}.flex--middle{align-items:center}.flex--bottom{align-items:flex-end}.flex--stretch{align-items:stretch}.flex--baseline{align-items:baseline}.flex--top--multi{align-content:flex-start}.flex--middle--multi{align-content:center}.flex--bottom--multi{align-content:flex-end}.flex--stretch--multi{align-content:stretch}.flex--justify--multi{align-content:space-between}.flex--spaced--multi{align-content:space-around}.flex__item{flex:1}.flex__item--msfix{flex:1 1 auto}.u-1\/2,.u-1\/3{flex:none!important}.flex__item--top{align-self:flex-start}.flex__item--middle{-ms-grid-row-align:center;align-self:center}.flex__item--bottom{align-self:flex-end}.flex__item--baseline{align-self:baseline}.viewport{width:100%;max-width:80rem;margin-right:auto;margin-left:auto}.viewport--full-height{min-height:100vh}:host{/*! Comment to prevent cssmin munging this rule with html above and borking Safari */box-sizing:border-box;background-color:transparent;display:block;position:absolute!important;outline:0;z-index:1002;pointer-events:none}#tooltip{color:var(--px-tooltip-text-color,#000);border:1px solid var(--px-tooltip-border-color,#000);box-shadow:0 1px 3px 0 var(--px-tooltip-shadow-color,#000);padding:15px 20px;margin:15px;max-width:var(--px-tooltip-max-width,400px);white-space:normal;overflow-wrap:break-word}#tooltip h6{margin:0}#tooltip p{margin:0;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}#tooltip p:first-child{text-transform:capitalize}div#carat{position:absolute;width:9.9px;height:9.9px}div#carat.top{margin-top:-4.95px;border:1px solid transparent;transform-origin:50% 50%;transform:rotate(-45deg);border-color:transparent transparent var(--px-tooltip-border-color,#000) var(--px-tooltip-border-color,#000)}div#carat.bottom,div#carat.left{border:1px solid transparent;transform-origin:50% 50%;background-color:var(--px-tooltip-background-color,#fff)}div#carat.bottom{top:10.9px;transform:rotate(45deg);border-color:var(--px-tooltip-border-color,#000) transparent transparent var(--px-tooltip-border-color,#000)}div#carat.left{right:10.9px;margin-top:9.9px;transform:rotate(45deg);border-color:var(--px-tooltip-border-color,#000) var(--px-tooltip-border-color,#000) transparent transparent}div#carat.right{left:10.9px;margin-top:9.9px;border:1px solid transparent;transform-origin:50% 50%;transform:rotate(-45deg);background-color:var(--px-tooltip-background-color,#fff);border-color:var(--px-tooltip-border-color,#000) transparent transparent var(--px-tooltip-border-color,#000)}.u-1\/1{width:100%!important}.u-1\/2{width:50%!important}.u-1\/3{width:33.33333%!important}.u-1\/4,.u-2\/3{flex:none!important}.u-2\/3{width:66.66667%!important}.u-1\/4{width:25%!important}.u-2\/4,.u-3\/4{flex:none!important}.u-2\/4{width:50%!important}.u-3\/4{width:75%!important}.u-1\/6,.u-2\/6{flex:none!important}.u-1\/6{width:16.66667%!important}.u-2\/6{width:33.33333%!important}.u-3\/6,.u-4\/6{flex:none!important}.u-3\/6{width:50%!important}.u-4\/6{width:66.66667%!important}.u-5\/6{width:83.33333%!important;flex:none!important}@media screen and (max-width:47.9rem){.u-1\/1-palm{width:100%!important}.u-1\/2-palm{width:50%!important;flex:none!important}.u-1\/3-palm{width:33.33333%!important;flex:none!important}.u-2\/3-palm{width:66.66667%!important;flex:none!important}.u-1\/4-palm{width:25%!important;flex:none!important}.u-2\/4-palm{width:50%!important;flex:none!important}.u-3\/4-palm{width:75%!important;flex:none!important}.u-1\/6-palm{width:16.66667%!important;flex:none!important}.u-2\/6-palm{width:33.33333%!important;flex:none!important}.u-3\/6-palm{width:50%!important;flex:none!important}.u-4\/6-palm{width:66.66667%!important;flex:none!important}.u-5\/6-palm{width:83.33333%!important;flex:none!important}}@media screen and (min-width:48rem) and (max-width:63.9rem){.u-1\/1-lap{width:100%!important}.u-1\/2-lap{width:50%!important;flex:none!important}.u-1\/3-lap{width:33.33333%!important;flex:none!important}.u-2\/3-lap{width:66.66667%!important;flex:none!important}.u-1\/4-lap{width:25%!important;flex:none!important}.u-2\/4-lap{width:50%!important;flex:none!important}.u-3\/4-lap{width:75%!important;flex:none!important}.u-1\/6-lap{width:16.66667%!important;flex:none!important}.u-2\/6-lap{width:33.33333%!important;flex:none!important}.u-3\/6-lap{width:50%!important;flex:none!important}.u-4\/6-lap{width:66.66667%!important;flex:none!important}.u-5\/6-lap{width:83.33333%!important;flex:none!important}}@media screen and (min-width:48rem){.u-1\/1-lap-and-up{width:100%!important}.u-1\/2-lap-and-up{width:50%!important;flex:none!important}.u-1\/3-lap-and-up{width:33.33333%!important;flex:none!important}.u-2\/3-lap-and-up{width:66.66667%!important;flex:none!important}.u-1\/4-lap-and-up{width:25%!important;flex:none!important}.u-2\/4-lap-and-up{width:50%!important;flex:none!important}.u-3\/4-lap-and-up{width:75%!important;flex:none!important}.u-1\/6-lap-and-up{width:16.66667%!important;flex:none!important}.u-2\/6-lap-and-up{width:33.33333%!important;flex:none!important}.u-3\/6-lap-and-up{width:50%!important;flex:none!important}.u-4\/6-lap-and-up{width:66.66667%!important;flex:none!important}.u-5\/6-lap-and-up{width:83.33333%!important;flex:none!important}}@media screen and (max-width:63.9rem){.u-1\/1-portable{width:100%!important}.u-1\/2-portable{width:50%!important;flex:none!important}.u-1\/3-portable{width:33.33333%!important;flex:none!important}.u-2\/3-portable{width:66.66667%!important;flex:none!important}.u-1\/4-portable{width:25%!important;flex:none!important}.u-2\/4-portable{width:50%!important;flex:none!important}.u-3\/4-portable{width:75%!important;flex:none!important}.u-1\/6-portable{width:16.66667%!important;flex:none!important}.u-2\/6-portable{width:33.33333%!important;flex:none!important}.u-3\/6-portable{width:50%!important;flex:none!important}.u-4\/6-portable{width:66.66667%!important;flex:none!important}.u-5\/6-portable{width:83.33333%!important;flex:none!important}}@media screen and (min-width:63.9rem){.u-1\/1-desk{width:100%!important}.u-1\/2-desk{width:50%!important;flex:none!important}.u-1\/3-desk{width:33.33333%!important;flex:none!important}.u-2\/3-desk{width:66.66667%!important;flex:none!important}.u-1\/4-desk{width:25%!important;flex:none!important}.u-2\/4-desk{width:50%!important;flex:none!important}.u-3\/4-desk{width:75%!important;flex:none!important}.u-1\/6-desk{width:16.66667%!important;flex:none!important}.u-2\/6-desk{width:33.33333%!important;flex:none!important}.u-3\/6-desk{width:50%!important;flex:none!important}.u-4\/6-desk{width:66.66667%!important;flex:none!important}.u-5\/6-desk{width:83.33333%!important;flex:none!important}}@media screen and (min-width:100%){.u-1\/1-desk-wide{width:100%!important}.u-1\/2-desk-wide{width:50%!important;flex:none!important}.u-1\/3-desk-wide{width:33.33333%!important;flex:none!important}.u-2\/3-desk-wide{width:66.66667%!important;flex:none!important}.u-1\/4-desk-wide{width:25%!important;flex:none!important}.u-2\/4-desk-wide{width:50%!important;flex:none!important}.u-3\/4-desk-wide{width:75%!important;flex:none!important}.u-1\/6-desk-wide{width:16.66667%!important;flex:none!important}.u-2\/6-desk-wide{width:33.33333%!important;flex:none!important}.u-3\/6-desk-wide{width:50%!important;flex:none!important}.u-4\/6-desk-wide{width:66.66667%!important;flex:none!important}.u-5\/6-desk-wide{width:83.33333%!important;flex:none!important}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx){.u-1\/1-retina{width:100%!important}.u-1\/2-retina{width:50%!important;flex:none!important}.u-1\/3-retina{width:33.33333%!important;flex:none!important}.u-2\/3-retina{width:66.66667%!important;flex:none!important}.u-1\/4-retina{width:25%!important;flex:none!important}.u-2\/4-retina{width:50%!important;flex:none!important}.u-3\/4-retina{width:75%!important;flex:none!important}.u-1\/6-retina{width:16.66667%!important;flex:none!important}.u-2\/6-retina{width:33.33333%!important;flex:none!important}.u-3\/6-retina{width:50%!important;flex:none!important}.u-4\/6-retina{width:66.66667%!important;flex:none!important}.u-5\/6-retina{width:83.33333%!important;flex:none!important}}
@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{background-color:var(--px-base-background-color,#fff);font-size:.9375em;line-height:1.33333;overflow-y:scroll;min-height:100%;box-sizing:border-box}:host,html{color:var(--px-base-text-color,#2c404c);line-height:1.33333;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,figure{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}address,blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,table,ul{margin-bottom:1rem}li>ol,li>ul{margin-bottom:0}dd,ol,ul{margin-left:2rem}img{max-width:100%;border:0}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre{overflow:auto}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:link,a:visited{color:#007acc}a:hover{color:#005c99}a:active{color:#003d66}a:active,a:hover{outline:0}.float--right{float:right!important}.float--left{float:left!important}.float--none{float:none!important}.text--left{text-align:left!important}.text--center{text-align:center!important}.proceed,.text--right{text-align:right!important}.full-height{height:100%!important}.informative{cursor:help!important}.pointer{cursor:pointer!important}.muted{opacity:.5!important}.caps{text-transform:uppercase!important}.hidden{display:none!important;visibility:hidden}.a11y,.visuallyhidden{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}.a11y.focusable:active,.a11y.focusable:focus,.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;overflow:visible;width:auto;height:auto;margin:0;clip:auto}@media screen and (max-width:44.9375em){.a11y-palm,.visuallyhidden-palm{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:45em) and (max-width:63.9375em){.a11y-lap,.visuallyhidden-lap{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:45em){.a11y-lap-and-up,.visuallyhidden-lap-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:63.9375em){.a11y-portable,.visuallyhidden-portable{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:64em){.a11y-desk,.visuallyhidden-desk{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx){.a11y-retina,.visuallyhidden-retina{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}.invisible{visibility:hidden!important}:host{/*! Comment to prevent cssmin munging this rule with html above and borking Safari */box-sizing:border-box;background-color:transparent;display:block;position:absolute!important;outline:0;z-index:1002;pointer-events:none}.tooltip-carat.top,.tooltip-container{background-color:var(--px-tooltip-background-color,#fff)}.tooltip-container{color:var(--px-tooltip-text-color,#000);border:1px solid var(--px-tooltip-border-color,#000);box-shadow:0 1px 3px 0 var(--px-tooltip-shadow-color,#000);pointer-events:none;outline:0;padding:15px 20px;margin:15px;max-width:var(--px-tooltip-max-width,400px);white-space:normal;overflow-wrap:break-word}.tooltip-container h6{margin:0}.tooltip-container p{margin:0;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.tooltip-container p:first-child{text-transform:capitalize}.tooltip-carat{pointer-events:none;position:absolute;width:9.9px;height:9.9px}.tooltip-carat.top{margin-top:-4.95px;border:1px solid transparent;transform-origin:50% 50%;transform:rotate(-45deg);border-color:transparent transparent var(--px-tooltip-border-color,#000) var(--px-tooltip-border-color,#000)}.tooltip-carat.bottom,.tooltip-carat.left{border:1px solid transparent;transform-origin:50% 50%;background-color:var(--px-tooltip-background-color,#fff)}.tooltip-carat.bottom{top:10.9px;transform:rotate(45deg);border-color:var(--px-tooltip-border-color,#000) transparent transparent var(--px-tooltip-border-color,#000)}.tooltip-carat.left{right:10.9px;margin-top:9.9px;transform:rotate(45deg);border-color:var(--px-tooltip-border-color,#000) var(--px-tooltip-border-color,#000) transparent transparent}.tooltip-carat.right{left:10.9px;margin-top:9.9px;border:1px solid transparent;transform-origin:50% 50%;transform:rotate(-45deg);background-color:var(--px-tooltip-background-color,#fff);border-color:var(--px-tooltip-border-color,#000) transparent transparent var(--px-tooltip-border-color,#000)}
</style>
</template>
</dom-module>
35 changes: 35 additions & 0 deletions demo/simple_demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>px-dropdown simple demo</title>
<script src="../../webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="../../polymer/polymer-mini.html" />
<link rel="import" href="../px-tooltip.html" />

<style>
html,
body {
margin: 0;
font-size: 15px;
font-family: 'GE Inspira Sans';
}
</style>
</head>

<body>
<template is="dom-bind">
<div style="margin: 50px">
<px-tooltip
for="btn1"
delay="50"
tooltip-message="This is a tooltip"
orientation="auto">
</px-tooltip>
<button id='btn1'>Hover over me</button>
</div>
</template>

</body>

</html>
4 changes: 2 additions & 2 deletions px-tooltip.html
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@
<style include="px-tooltip-styles"></style>

<div id="tooltipWrapper" class="hidden">
<div id="carat"></div>
<div id="tooltip">
<div id="carat" class="tooltip-carat"></div>
<div id="tooltip" class="tooltip-container">
<div id="message">
<span>{{ tooltipMessage }}</span>
<content></content>
Expand Down
8 changes: 2 additions & 6 deletions sass/px-tooltip.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@
@import "px-helpers-design/_generic.helpers.scss";

// Base
@import "px-flexbox-design/_base.flexbox.scss";
@import "px-viewport-design/_base.viewport.scss";


$tooltip-background-color: var(--px-tooltip-background-color, white);
Expand All @@ -38,7 +36,7 @@ $half: 4.9495px;
pointer-events: none;
}

#tooltip {
.tooltip-container {
background-color: $tooltip-background-color;
color: $tooltip-text-color;
border: 1px solid $tooltip-border-color;
Expand All @@ -62,7 +60,7 @@ $half: 4.9495px;
}
}

div#carat {
.tooltip-carat {
pointer-events: none;
position: absolute;
width: 9.899px; //sqrt(7*7 + 7*7)
Expand Down Expand Up @@ -104,5 +102,3 @@ div#carat {
}

// Trumps
@import "px-spacing-responsive-design/_trumps.spacing-responsive.scss";
@import "px-widths-responsive-design/_trumps.widths-responsive.scss";

0 comments on commit 5aec9bb

Please sign in to comment.